<template>
  <!-- 砼配合比-新增 -->
  <div class="e-form">
       <BillTop title="砼配合比新增" @cancel="cancel"></BillTop>
    <div class="tabs">
      <div class="tabs-title">基本信息</div>
      <div style="width: 100%" class="form">
        <el-form
          :model="formData"
          label-width="150px"
          :rules="rules"
          ref="formData"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="机构：">
                {{ formData.orgName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物资类别：">
                <!-- 水泥砼 -->
                  {{ formData.category}}
                </el-form-item>
            </el-col>
          </el-row>
           <el-row>
                <el-col :span="12">
                  <el-form-item label="配合比名称：">
                      {{ formData.concreteName }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="砼规格：">
                    <!-- c25 -->
                      {{ formData.spec }}
                    </el-form-item>
                </el-col>
              </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位：">
                {{ formData.unit }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编制日期：" prop="compileDate">
                <el-date-picker
                  v-model="formData.compileDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="启用：">
                <el-switch
                  v-model="formData.isEnable"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="录入人：">
                {{ formData.founderName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="状态：">
                {{ "草稿" }}
              </el-form-item>
            </el-col>
            <el-col :span="12"> </el-col>
          </el-row>

          <el-row>
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.remarks"
              >
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="buttons">
      <span class="tip"
        ><span style="color: red; margin-right: 0">*</span>为必填项</span
      >
      <el-button
        type="primary"
        style="background: #2e61d7"
        @click="save('formData')"
        >保存</el-button
      >
      <el-button @click="cancel()">关闭</el-button>
    </div>
  </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import { AddConcreteMirtune } from '@/api/materials/concreteMirtune.js'

export default {
    data () {
        return {
            //表单数据
            formData: {
                'billId': '',
                'billNo': '',
                'category': '',
                'categoryId': '',
                'compileDate': '',
                'concreteName': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'isEnable': true,
                'orgId': '',
                'orgName': '',
                'remarks': '',
                'spec': '',
                'state': '',
                'unit': '',
                'workId': ''
            },

            orgId: '', //机构id
            orgName: '', //机构名称
            isSkip: false, //是否跳转

            //验证
            rules: {
                compileDate: [
                    { required: true, message: '请选择编制日期：', trigger: 'change' },
                ],

            },
        }
    },
    computed: {},
    components: {},
    created () {
        try {
            let data = JSON.parse(localStorage.getItem('vuex'))
            this.orgId = data.userInfo.orgInfo.orgId
            this.formData.orgName = data.userInfo.orgInfo.orgName
            this.formData.concreteName = this.$route.query.className
            this.formData.category =  this.$route.query.parentClassName
            this.formData.unit = this.$route.query.unit
            this.formData.spec = this.$route.query.spec
            this.formData.categoryId = this.$route.query.categoryId
        } catch (error) {
            alert(error.message)
        }
    },
    mounted () {},
    beforeDestroy () {},
    methods: {
    //保存
        save (formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // this.$Ajax
                    //     .httpPost({
                    //         url: '/material/concreteMixProportionManagement/create',
                    //         params: this.formData,
                    //     })
                    AddConcreteMirtune(this.formData)
                        .then(res => {
                            this.clientPop(
                                'suc',
                                '保存成功,是否继续',
                                () => {
                                    this.$router.replace({
                                        path: '/concreteMirtuneEdit',
                                        query: {
                                            billid: res,
                                            name: 'receivingMaterials',
                                        },
                                    })
                                },
                                this.cancel
                            )
                        })
                } else {
                    return false
                }
            })
        },
        //取消按钮
        cancel () {
            this.$router.replace('/concreteMirtune')
        },
    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;
  }
}

.e-table {
  background: #fff;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>
